<template>
  <div>
    <mu-appbar style="width: 100%;text-align: left" color="primary">
      <span >tensroflow项目实战</span>
      <mu-button flat slot="right">你好，{{user_info.nickname}}！</mu-button>
    </mu-appbar>

    <div id="mycontainer">


      <!--纸类-->
      <div class="container">
        <div class="dataCollection panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">纸类</h3>
          </div>
          <!--        hidden属性配合button使用  更美观-->
          <input type="file" id="userFile_Paper"  multiple = "multiple" @change="countPaper" style="visibility: hidden;"  >

          <!--        如果没有图片   显示添加图片-->
          <p v-if="paper_total===0">在这里添加纸类的图片</p>
          <!--        否则 显示图片-->
          <div    v-else>
            <div v-for="(item, index) in PaperImgs " :key="index" style="display: inline-block;margin: 0 5px;position:relative;">
              <img v-if="index<3" :id="'paper'+index" :src=item style="  height: 40px;width: 40px;margin: 2px">
              <img v-else :id="'paper'+index"  :src=item hidden>
              <button class="btn btn-info"  v-if="index===3" style="margin:0 5px;height: 40px;width: 40px; display: block" @click="openPaperScrollDialog">...</button>
            </div>
            <p v-if="paper_total>0">共{{paper_total}}张</p>

          </div>

          <button type="button" class="btn btn-danger delPaperBtn" @click="deletePaperPictureAll">清空</button>
          <button type="button" class="btn btn-info addPaperBtn" @click="addPaperPicture">添加</button>

          <mu-container>
            <mu-dialog title="All picture" width="400px" scrollable :open.sync="openPaperScroll">
              <mu-list>
                <div  :key="index" v-for="(item, index) in PaperImgs" style="display: inline-block;margin: 0 5px;position:relative;">
                  <img :id="'paper'+index" :src=item style="height: 50px;width: 50px;margin: 2px">
                  <img src="../assets/del.svg" @click="deletePaperPicture(index)"  style="width:15px;height:15px;line-height:15px;border-radius: 5px;position:absolute;float:right;top:0;right:0;display:block;">

                </div>
              </mu-list>
              <mu-button slot="actions" flat color="primary" @click="closePaperScrollDialog">ok</mu-button>
            </mu-dialog>
          </mu-container>
        </div>
      </div>
      <!--纸类结束-->

      <!--      塑料类-->
      <div class="container">
        <div class="dataCollection panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">塑料类</h3>
          </div>
          <!--        hidden属性配合button使用  更美观-->
          <input type="file" id="userFile_Plastic"  multiple = "multiple" @change="countPlastic" style="visibility: hidden;"  >


          <!--        如果没有图片   显示添加图片-->
          <p v-if="plastic_total===0">在这里添加塑料类的图片</p>
          <!--        否则 显示图片-->
          <div    v-else>
            <div v-for="(item, index) in plasticImgs" :key="index" style="display: inline-block;margin: 0 5px;position:relative;">
              <img v-if="index<3"  :id="'plastic'+index" :src=item style="height: 40px;width: 40px;margin: 2px">
              <img v-else :id="'plastic'+index"  :src=item hidden>
              <button class="btn btn-info" v-if="index===3" style="display: block" @click="openPlasticScrollDialog">...</button>
            </div>
            <p v-if="plastic_total>0">共{{plastic_total}}张</p>

          </div>



          <button type="button" class="btn btn-danger delPaperBtn" @click="deletePlasticPictureAll">清空</button>
          <button type="button" class="btn btn-info addPaperBtn" @click="addPlasticPicture">添加</button>

          <mu-container>
            <mu-dialog title="All picture" width="400px" scrollable :open.sync="openPlasticScroll">
              <mu-list>
                <div  :key="index" v-for="(item, index) in plasticImgs" style="display: inline-block;margin: 0 5px;position:relative;">
                  <img  :src=item style="height: 50px;width: 50px;margin: 2px">
                  <img src="../assets/del.svg" @click="deletePlasticPicture(index)"  style="width:15px;height:15px;line-height:15px;border-radius: 5px;position:absolute;float:right;top:0;right:0;display:block;">

                </div>
              </mu-list>
              <mu-button slot="actions" flat color="primary" @click="closePlasticScrollDialog">ok</mu-button>
            </mu-dialog>
          </mu-container>
        </div>
      </div>
      <!--塑料类结束-->

      <!--    玻璃类-->
      <div class="container">
        <!--      玻璃类-->
        <div class="dataCollection panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">玻璃类</h3>
          </div>
          <!--        hidden属性配合button使用  更美观-->
          <input type="file" id="userFile_Glass"  multiple = "multiple" @change="countGlass" style="visibility: hidden;"  >


          <!--        如果没有图片   显示添加图片-->
          <p v-if="Glass_total===0">在这里添加玻璃类的图片</p>
          <!--        否则 显示图片-->
          <div    v-else>
            <div v-for="(item, index) in GlassImgs" :key="index" style="display: inline-block;margin: 0 5px;position:relative;">
              <img v-if="index<3" :id="'glass'+index" :src=item style="height: 40px;width: 40px;margin: 2px">
              <img v-else :id="'glass'+index"  :src=item hidden>
              <button class="btn btn-info" v-if="index===3" style="display: block" @click="openGlassScrollDialog">...</button>
            </div>
            <p v-if="Glass_total>0">共{{Glass_total}}张</p>

          </div>

          <button type="button" class="btn btn-danger delPaperBtn" @click="deleteGlassPictureAll">清空</button>
          <button type="button" class="btn btn-info addPaperBtn" @click="addGlassPicture">添加</button>

          <mu-container>
            <mu-dialog title="All picture" width="400px" scrollable :open.sync="openGlassScroll">
              <mu-list>
                <div  :key="index" v-for="(item, index) in GlassImgs" style="display: inline-block;margin: 0 5px;position:relative;">
                  <img   :src=item style="height: 50px;width: 50px;margin: 2px">
                  <img src="../assets/del.svg" @click="deleteGlassPicture(index)"  style="width:15px;height:15px;line-height:15px;border-radius: 5px;position:absolute;float:right;top:0;right:0;display:block;">

                </div>
              </mu-list>
              <mu-button slot="actions" flat color="primary" @click="closeGlassScrollDialog">ok</mu-button>
            </mu-dialog>
          </mu-container>
        </div>
      </div>
      <!--   玻璃类结束-->

      <!--      厨余类-->
      <div class="container">
        <div class="dataCollection panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">厨余类</h3>
          </div>
          <!--        hidden属性配合button使用  更美观-->
          <input type="file" id="userFile_Kitchen"  multiple = "multiple" @change="countKitchen" style="visibility: hidden;"  >


          <!--        如果没有图片   显示添加图片-->
          <p v-if="Kitchen_total===0">在这里添加厨余类的图片</p>
          <!--        否则 显示图片-->
          <div    v-else>
            <div v-for="(item, index) in KitchenImgs" :key="index" style="display: inline-block;margin: 0 5px;position:relative;">
              <img v-if="index<3" :id="'kitchen'+index" :src=item style="height: 40px;width: 40px;margin: 2px">
              <img v-else :id="'kitchen'+index" :src=item hidden>
              <button class="btn btn-info" v-if="index===3" style="display: block" @click="openKitchenScrollDialog">...</button>
            </div>
            <p v-if="Kitchen_total>0">共{{Kitchen_total}}张</p>

          </div>



          <button type="button" class="btn btn-danger delPaperBtn" @click="deleteKitchenPictureAll">清空</button>
          <button type="button" class="btn btn-info addPaperBtn" @click="addKitchenPicture">添加</button>

          <mu-container>
            <mu-dialog title="All picture" width="400px" scrollable :open.sync="openKitchenScroll">
              <mu-list>
                <div  :key="index" v-for="(item, index) in KitchenImgs" style="display: inline-block;margin: 0 5px;position:relative;">
                  <img   :src=item style="height: 50px;width: 50px;margin: 2px">
                  <img src="../assets/del.svg" @click="deleteKitchenPicture(index)"  style="width:15px;height:15px;line-height:15px;border-radius: 5px;position:absolute;float:right;top:0;right:0;display:block;">



                </div>
              </mu-list>
              <mu-button slot="actions" flat color="primary" @click="closeKitchenScrollDialog">ok</mu-button>
            </mu-dialog>
          </mu-container>

        </div>
      </div>
      <!--   厨余类结束-->

      <!--      电池类-->
      <div class="container">
        <div class="dataCollection panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">电池类</h3>
          </div>
          <!--        hidden属性配合button使用  更美观-->
          <input type="file" id="userFile_Battery"  multiple = "multiple" @change="countBattery" style="visibility: hidden;"  >


          <!--        如果没有图片   显示添加图片-->
          <p v-if="Battery_total===0">在这里添加电池类的图片</p>
          <!--        否则 显示图片-->
          <div    v-else>
            <div v-for="(item, index) in BatteryImgs" :key="index" style="display: inline-block;margin: 0 5px;position:relative;">
              <img v-if="index<3" :id="'battery'+index" :src=item style="height: 40px;width: 40px;margin: 2px">
              <img v-else :id="'battery'+index" :src=item hidden>
              <button class="btn btn-info" v-if="index===3" style="display: block" @click="openBatteryScrollDialog">...</button>
            </div>
            <p v-if="Battery_total>0">共{{Battery_total}}张</p>

          </div>



          <button type="button" class="btn btn-danger delPaperBtn" @click="deleteBatteryPictureAll">清空</button>
          <button type="button" class="btn btn-info addPaperBtn" @click="addBatteryPicture">添加</button>

          <mu-container>
            <mu-dialog title="All picture" width="400px" scrollable :open.sync="openBatteryScroll">
              <mu-list>
                <div  :key="index" v-for="(item, index) in BatteryImgs" style="display: inline-block;margin: 0 5px;position:relative;">
                  <img   :src=item style="height: 50px;width: 50px;margin: 2px">
                  <img src="../assets/del.svg" @click="deleteBatteryPicture(index)"  style="width:15px;height:15px;line-height:15px;border-radius: 5px;position:absolute;float:right;top:0;right:0;display:block;">

                </div>
              </mu-list>
              <mu-button slot="actions" flat color="primary" @click="closeBatteryScrollDialog">ok</mu-button>
            </mu-dialog>
          </mu-container>

        </div>
      </div>
      <!--   电池类结束-->

      <!--      金属类-->
      <div class="container">
        <div class="dataCollection panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">金属类</h3>
          </div>
          <!--        hidden属性配合button使用  更美观-->
          <input type="file" id="userFile_Meta"  multiple = "multiple" @change="countMeta" style="visibility: hidden;"  >


          <!--        如果没有图片   显示添加图片-->
          <p v-if="Meta_total===0">在这里添加金属类的图片</p>
          <!--        否则 显示图片-->
          <div    v-else>
            <div v-for="(item, index) in MetaImgs" :data-length-n="3" :key="index" style="display: inline-block;margin: 0 5px;position:relative;">

              <img v-if="index<3" :id="'meta'+index"  :src=item style="height: 40px;width: 40px;margin: 2px">
              <img v-else :id="'meta'+index"   :src=item hidden>


              <button class="btn btn-info" v-if="index===3" style="display: block" @click="openMetaScrollDialog">...</button>
            </div>
            <p v-if="Meta_total>0">共{{Meta_total}}张</p>

          </div>



          <button type="button" class="btn btn-danger delPaperBtn" @click="deleteMetaPictureAll">清空</button>
          <button type="button" class="btn btn-info addPaperBtn" @click="addMetaPicture">添加</button>

          <mu-container>
            <mu-dialog title="All picture" width="400px" scrollable :open.sync="openMetaScroll">
              <mu-list>
                <div  :key="index" v-for="(item, index) in MetaImgs" style="display: inline-block;margin: 0 5px;position:relative;">
                  <img  :id="'meta'+index" :src=item style="height: 50px;width: 50px;margin: 2px">
                  <img src="../assets/del.svg" @click="deleteMetaPicture(index)"  style="width:15px;height:15px;line-height:15px;border-radius: 5px;position:absolute;float:right;top:0;right:0;display:block;">

                </div>
              </mu-list>
              <mu-button slot="actions" flat color="primary" @click="closeMetaScrollDialog">ok</mu-button>
            </mu-dialog>
          </mu-container>

        </div>
      </div>
      <!--   电池类结束-->
      <hr/>

      <!--  模型构建-->

      <div class="ModelCreate panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">模型构建</h3>
        </div>
        <div class="panel-body">

          <mu-container>
            <mu-row gutter>
              <mu-col span="12" lg="4" sm="6">
                <mu-select placeholder="请选择模型" label="模型选择" v-model="selectModelResult" >
                  <mu-option v-for="(option,value) in selectModel" :key="value" :label="option.name" :value="option.name"></mu-option>
                </mu-select>
              </mu-col>
            </mu-row>
            <mu-row gutter>
              <mu-col span="12" lg="4" sm="6">
                <mu-select placeholder="请选择网络结构"  label="网络结构" v-model="LayersResult" >
                  <mu-option v-for="(option,value) in Layers" :key="value" :label="option.name" :value="option.value"></mu-option>
                </mu-select>
              </mu-col>
            </mu-row>
            <mu-row gutter>
              <mu-col span="12" lg="4" sm="6">
                <mu-select placeholder="请选择激活函数" label="激活函数" v-model="ActivationResult" >
                  <mu-option v-for="(option,value) in selectActivation" :key="value" :label="option.name" :value="option.value"></mu-option>
                </mu-select>
              </mu-col>
            </mu-row>
          </mu-container>
          <div class="btn btn-info" @click="createModel">模型创建并训练</div>
        </div>
      </div>
    </div>


    <mu-container class="bottomNav">
      <mu-bottom-nav value="2">
        <mu-bottom-nav-item value="1" title="猫狗识别" to="/main" icon="restore"></mu-bottom-nav-item>
        <mu-bottom-nav-item value="2" title="项目实战" to="/practice" icon="edit"></mu-bottom-nav-item>
        <mu-bottom-nav-item value="3" title="模型测试" to="/evalmodel" icon="explore"></mu-bottom-nav-item>
        <mu-bottom-nav-item value="4" title="个人资料" to="/mymodel" icon="person"></mu-bottom-nav-item>
      </mu-bottom-nav>
    </mu-container>
  </div>
</template>

<script>
import * as tf from '@tensorflow/tfjs'
import qs from "qs"
const axios = require('axios');
import {createComplexModel, createSimpleModel} from "../createModel";

export default {
  name: "Practice",
  data(){
    return{
      PaperImgs: [],
      plasticImgs:[],
      GlassImgs:[],
      BatteryImgs:[],
      KitchenImgs:[],
      MetaImgs:[],


      paper_total:0,
      plastic_total:0,
      Glass_total:0,
      Battery_total:0,
      Kitchen_total:0,
      Meta_total:0,

      openPaperScroll: false,
      openPlasticScroll: false,
      openGlassScroll: false,
      openBatteryScroll: false,
      openKitchenScroll:false,
      openMetaScroll:false,
      //model_struct 1: 2:
      selectModelResult:'',
      selectModel:[
        {value:'1',name:'简单模型'},
        {value:'2',name:'复杂模型'},
      ],

      Layers: [
        {value:'3',name:'3层'},
        {value:'4',name:'4层'},
        {value:'5',name:'5层'}
      ],

      selectActivation:[
        { value:'relu', name:'relu激活函数'},
        { value:'sigmoid', name:'sigmoid激活函数'},
        { value:'tanh', name:'tanh激活函数'},
      ],

      //model_struct
      LayersResult:'',
      //activation
      ActivationResult:'',


      //简单模型
      SimpleModel:'',
      //复杂模型
      ComplexModel:'',

      //训练好的  简单模型
      simpleModelSave:'',

      //训练好的 复杂模型
      complexModelSave:'',
      user_info:{
        id:"",
        nickname:""
      }
    }
  },
  methods:{
    // ////////////////////////////////纸类/ ///////////////////////////////
    //添加纸类图片
    addPaperPicture() {
      var btn = document.getElementById("userFile_Paper")
      btn.click()
    },
    //删除单张纸类
    deletePaperPicture(index){
      if(index<3){
        this.$data.ViewPapers.splice(index,1)
        this.$data.paper_total -=1

      }
      this.$data.PaperImgs.splice(index,1);
      // this.$data.PaperImgs = this.$data.PaperImgs - 1;  //这是错误的写法   应改为下面代码
      this.$data.paper_total = this.$data.paper_total - 1;

    },
    //删除所有纸类
    deletePaperPictureAll(){
      this.$data.paper_total = 0;
      this.$data.PaperImgs = [];
      this.$data.ViewPapers=[]
    },
    countPaper(e) {
      var len = e.target.files.length;
      var file = document.getElementById('userFile_Paper').files;

      this.$data.paper_total += len;
      console.log(file)
      let _this = this;
      for (let i = 0; i < e.target.files.length; i++) {

        let reader = new FileReader();
        reader.readAsDataURL(file[i]);
        reader.onloadend = function () {


          //catImgs数组是用户上传猫猫图片的绝对路径
          _this.PaperImgs.push(this.result);

        }
      }


    },
    //用于显示所有图片
    openPaperScrollDialog () {
      this.openPaperScroll = true;



    },
    closePaperScrollDialog () {
      this.openPaperScroll = false;

    },
    // ////////////////////////////////纸类结束/ ///////////////////////////////


    // ////////////////////////////////塑料类/ ///////////////////////////////
    addPlasticPicture(){
      var btn = document.getElementById("userFile_Plastic")
      btn.click()
    },
    //删除单张塑料
    deletePlasticPicture(index){

      this.$data.plasticImgs.splice(index,1);
      this.$data.plastic_total = this.$data.plastic_total - 1;

    },
    deletePlasticPictureAll(){
      this.$data.plastic_total = 0;
      this.$data.plasticImgs = [];
    },
    countPlastic(e){
      var len = e.target.files.length;
      var file = document.getElementById('userFile_Plastic').files;

      this.$data.plastic_total += len;

      let _this = this;
      for (let i = 0; i < len; i++) {
        let reader = new FileReader();
        reader.readAsDataURL(file[i]);
        reader.onloadend = function () {

          _this.plasticImgs.push(this.result);
        }
      }
    },
    //用于显示所有图片
    openPlasticScrollDialog () {
      this.openPlasticScroll = true;
    },
    closePlasticScrollDialog () {
      this.openPlasticScroll = false;
    },
    // ////////////////////////////////塑料类结束/ ///////////////////////////////


    // ////////////////////////////////玻璃类/ ///////////////////////////////
    addGlassPicture(){
      var btn = document.getElementById("userFile_Glass")
      btn.click()
    },
    //删除单张玻璃
    deleteGlassPicture(index){

      this.$data.GlassImgs.splice(index,1);
      this.$data.Glass_total = this.$data.Glass_total - 1;

    },
    deleteGlassPictureAll(){
      this.$data.Glass_total = 0;
      this.$data.GlassImgs = [];
    },
    countGlass(e){
      var len = e.target.files.length;
      var file = document.getElementById('userFile_Glass').files;

      this.$data.Glass_total += len;

      let _this = this;
      for (let i = 0; i < len; i++) {
        let reader = new FileReader();
        reader.readAsDataURL(file[i]);
        reader.onloadend = function () {

          _this.GlassImgs.push(this.result);
        }
      }
    },
    //用于显示所有图片
    openGlassScrollDialog () {
      this.openGlassScroll = true;
    },
    closeGlassScrollDialog () {
      this.openGlassScroll = false;
    },
    // ////////////////////////////////玻璃类结束/ ///////////////////////////////

    // ////////////////////////////////电池类/ ///////////////////////////////
    addBatteryPicture(){
      var btn = document.getElementById("userFile_Battery")
      btn.click()
    },
    //删除单张电池
    deleteBatteryPicture(index){

      this.$data.BatteryImgs.splice(index,1);
      this.$data.Battery_total = this.$data.Battery_total - 1;

    },
    deleteBatteryPictureAll(){
      this.$data.Battery_total = 0;
      this.$data.BatteryImgs = [];
    },
    countBattery(e){
      var len = e.target.files.length;
      var file = document.getElementById('userFile_Battery').files;

      this.$data.Battery_total += len;

      let _this = this;
      for (let i = 0; i < len; i++) {
        let reader = new FileReader();
        reader.readAsDataURL(file[i]);
        reader.onloadend = function () {

          _this.BatteryImgs.push(this.result);
        }
      }
    },
    //用于显示所有图片
    openBatteryScrollDialog () {
      this.openBatteryScroll = true;
    },
    closeBatteryScrollDialog () {
      this.openBatteryScroll = false;
    },
    // ///////////////////////电池类结束


    //////////////////////////////厨余类
    addKitchenPicture(){
      var btn = document.getElementById("userFile_Kitchen")
      btn.click()
    },
    //删除单张厨余
    deleteKitchenPicture(index){

      this.$data.KitchenImgs.splice(index,1);
      this.$data.Kitchen_total = this.$data.Kitchen_total - 1;

    },
    deleteKitchenPictureAll(){
      this.$data.Kitchen_total = 0;
      this.$data.KitchenImgs = [];
    },
    countKitchen(e){
      var len = e.target.files.length;
      var file = document.getElementById('userFile_Kitchen').files;

      this.$data.Kitchen_total += len;

      let _this = this;
      for (let i = 0; i < len; i++) {
        let reader = new FileReader();
        reader.readAsDataURL(file[i]);
        reader.onloadend = function () {

          _this.KitchenImgs.push(this.result);
        }
      }
    },
    //用于显示所有图片
    openKitchenScrollDialog () {
      this.openKitchenScroll = true;
    },
    closeKitchenScrollDialog () {
      this.openKitchenScroll = false;
    },
    ///////////////////////////////厨余类结束

    ///////////////////////////////金属类
    //添加纸类图片
    addMetaPicture() {
      var btn = document.getElementById("userFile_Meta")
      btn.click()
    },
    //删除单张纸类
    deleteMetaPicture(index){

      this.$data.MetaImgs.splice(index,1);
      // this.$data.PaperImgs = this.$data.PaperImgs - 1;  //这是错误的写法   应改为下面代码
      this.$data.Meta_total = this.$data.Meta_total - 1;

    },
    //删除所有纸类
    deleteMetaPictureAll(){
      this.$data.Meta_total = 0;
      this.$data.MetaImgs = [];
    },
    countMeta(e) {
      var len = e.target.files.length;
      var file = document.getElementById('userFile_Meta').files;

      this.$data.Meta_total += len;
      console.log(file)
      let _this = this;
      for (let i = 0; i < e.target.files.length; i++) {
        let reader = new FileReader();
        reader.readAsDataURL(file[i]);
        reader.onloadend = function () {
          //catImgs数组是用户上传猫猫图片的绝对路径
          _this.MetaImgs.push(this.result);
        }
      }
    },
    //用于显示所有图片
    openMetaScrollDialog () {
      this.openMetaScroll = true;
    },
    closeMetaScrollDialog () {
      this.openMetaScroll = false;
    },
    ///////////////////////////////金属类结束

    simpleModelTrain(){
      let img;
      var _this=this
      //获取需要创建的模型
      var model = this.$data.SimpleModel;
      //简单模型训练过程
      //加载图片数据
      var paperTensor;
      var plasticTensor;
      var metalTensor;
      var glassTensor;
      var kitchenTensor;
      var batteryTensor;
      var paperArray = [];
      var plasticArray = [];
      var metalArray = [];
      var glassArray = [];
      var kitchenArray = [];
      var batteryArray = [];
      var paperLength = this.$data.PaperImgs.length;
      var plasticLength = this.$data.plasticImgs.length;
      var metaLength = this.$data.MetaImgs.length;
      var glassLength = this.$data.GlassImgs.length;
      var kitchenLength = this.$data.KitchenImgs.length;
      var batteryLength = this.$data.BatteryImgs.length;
      var temp;
      //所有图片的张量
      var ImgsTensor;
      var labelTensor = [];

      //图片数据获取并转换为张量
      //纸类图片转换张量

      for (let i = 0; i < paperLength; i++) {
        let img = document.getElementById('paper'+i);
        // console.log(i,img)
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        paperArray.push(tensor);
        labelTensor.push(1,0,0,0,0,0);
      }
      paperTensor = tf.concat(paperArray,0);
      console.log('paper ok')

      //塑料图片转换张量
      for (let i = 0; i < plasticLength; i++) {
        img = document.getElementById('plastic' + i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        plasticArray.push(tensor);
        labelTensor.push(0,1,0,0,0,0);
      }
      plasticTensor = tf.concat(plasticArray,0);
      console.log('plastic ok')

      //金属图片转换张量
      for (let i = 0; i < metaLength; i++) {
        img = document.getElementById('meta'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        // tf.print(imgTensor);
        let tensor = imgTensor.expandDims(0);
        metalArray.push(tensor);
        labelTensor.push(0,0,1,0,0,0);
      }
      metalTensor = tf.concat(metalArray,0);
      console.log('meta ok')

      //玻璃图片转换张量
      for (let i = 0; i < glassLength; i++) {
        img = document.getElementById('glass'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        glassArray.push(tensor);
        labelTensor.push(0,0,0,1,0,0);
      }
      glassTensor = tf.concat(glassArray,0);
      console.log('glass ok')

      //厨余图片转换张量
      for (let i = 0; i < kitchenLength; i++) {
        img = document.getElementById('kitchen'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        kitchenArray.push(tensor);
        labelTensor.push(0,0,0,0,1,0);
      }
      kitchenTensor = tf.concat(kitchenArray,0);
      console.log('kitchen ok')

      //电池图片转为张量
      for (let i = 0; i < batteryLength; i++) {
        img = document.getElementById('battery'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        batteryArray.push(tensor);
        labelTensor.push(0,0,0,0,0,1);
      }
      batteryTensor = tf.concat(batteryArray, 0);
      console.log('battery ok')

      ImgsTensor = tf.concat([paperTensor, plasticTensor, metalTensor, glassTensor, kitchenTensor, batteryTensor], 0);
      var arrLength = paperLength + plasticLength + metaLength + glassLength + kitchenLength + batteryLength;
      labelTensor = tf.tensor(labelTensor, [arrLength, 6]);
      const optimizer = 'rmsprop';
      model.compile({
        optimizer,
        loss: 'categoricalCrossentropy',
        metrics: ['accuracy'],
      });

      model.summary();
      // const batchSize = 12;
      const epochs = 5;
      //模型训练
      async function train(){
        const history =await model.fit(ImgsTensor, labelTensor, {
          epochs,
          shuffle: true,
        });
        console.log(history);

        var temp
        if(_this.$data.selectModelResult.name == '简单模型'){
          temp=_this.$data.LayersResult+'层全连接网络'
        }else{
          temp=_this.$data.LayersResult+'层卷积网络'

        }
        var jsonParam={
          model_struct:temp,    //层数
          model_type:_this.$data.LayersResult,                      //简单  复杂
          activation:_this.$data.ActivationResult,  //激活函数
        }
        //模型保存
        var result=await model.save('http://8.210.14.57:2444/192.168.31.103/uploadMyModel?user_id='+_this.$data.user_info.id)
        axios.post('http://8.210.14.57:2444/192.168.31.103/uploadModelInfo',qs.stringify(jsonParam)).then(function (response) {
          console.log(response);
        })
        console.log(result)
      }
      train();
      this.$data.simpleModelSave=temp

    },
    complexModelTrain(){
//获取需要创建的模型
      var _this=this
      var model = this.$data.ComplexModel;
      //复杂模型训练过程
      //加载图片数据
      var paperTensor;
      var plasticTensor;
      var metaTensor;
      var glassTensor;
      var kitchenTensor;
      var batteryTensor;
      var paperArray = [];
      var plasticArray = [];
      var metaArray = [];
      var glassArray = [];
      var kitchenArray = [];
      var batteryArray = [];
      var paperLength = this.$data.PaperImgs.length;
      var plasticLength = this.$data.plasticImgs.length;
      var metaLength = this.$data.MetaImgs.length;
      var glassLength = this.$data.GlassImgs.length;
      var kitchenLength = this.$data.KitchenImgs.length;
      var batteryLength = this.$data.BatteryImgs.length;
      var temp;

      //所有图片的张量
      var ImgsTensor;
      var labelTensor = [];

      //图片数据获取并转换为张量
      //纸类图片转换张量
      for (let i = 0; i < paperLength; i++) {
        let img = document.getElementById('paper'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        paperArray.push(tensor);
        labelTensor.push(1,0,0,0,0,0)
      }
      paperTensor = tf.concat(paperArray,0);
      console.log('complex paper ok')
      //塑料图片转换张量

      for (let i = 0; i < plasticLength; i++) {
        let img = document.getElementById('plastic'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        plasticArray.push(tensor);
        labelTensor.push(0,1,0,0,0,0)
      }
      plasticTensor = tf.concat(plasticArray,0);
      console.log('complex plastic ok')
      //金属图片转换张量
      for (let i = 0; i < metaLength; i++) {
        var img = document.getElementById('meta'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        // tf.print(imgTensor);
        let tensor = imgTensor.expandDims(0);
        metaArray.push(tensor);
        labelTensor.push(0,0,1,0,0,0)
      }
      metaTensor = tf.concat(metaArray,0);
      console.log('complex meta ok')
      //玻璃图片转换张量
      for (let i = 0; i < glassLength; i++) {
        let img = document.getElementById('glass'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        glassArray.push(tensor);
        labelTensor.push(0,0,0,1,0,0)
      }
      glassTensor = tf.concat(glassArray,0);
      console.log('complex glass ok')
      //厨余图片转换张量
      for (let i = 0; i < kitchenLength; i++) {
        let img = document.getElementById('kitchen'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        kitchenArray.push(tensor);
        labelTensor.push(0,0,0,0,1,0)
      }
      kitchenTensor = tf.concat(kitchenArray,0);
      console.log('complex kitchen ok')
      //电池图片转为张量
      for (let i = 0; i < batteryLength; i++) {
        let img = document.getElementById('battery'+i);
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat();
        let tensor = imgTensor.expandDims(0);
        batteryArray.push(tensor);
        labelTensor.push(0,0,0,0,0,1)
      }
      batteryTensor = tf.concat(batteryArray, 0);
      console.log('complex battery ok')
      ImgsTensor = tf.concat([paperTensor, plasticTensor, metaTensor, glassTensor, kitchenTensor, batteryTensor], 0);
      tf.print(ImgsTensor);
      var arrLength = paperLength + plasticLength + metaLength + glassLength + kitchenLength + batteryLength;
      labelTensor = tf.tensor(labelTensor, [arrLength, 6]);
      console.log(labelTensor);
      tf.print(labelTensor)
      const optimizer = 'rmsprop';
      model.compile({
        optimizer,
        loss: 'categoricalCrossentropy',
        metrics: ['accuracy'],
      });
      console.log(model.summary());
      // const batchSize = 12;
      const epochs = 5;
      //复杂模型训练
      async function train(){
        const history =await model.fit(ImgsTensor, labelTensor, {
          epochs,
          shuffle: true,
        });
        console.log(history);
        var temp
        if(_this.$data.selectModelResult == '简单模型'){
          temp=_this.$data.LayersResult+'层全连接网络'
        }else{
          temp=_this.$data.LayersResult+'层卷积网络'
        }
        var jsonParam={
          model_struct:temp,    //层数
          model_type:_this.$data.selectModelResult ,                  //简单  复杂
          activation:_this.$data.ActivationResult,      //激活函数
        }
        var result=await model.save('http://8.210.14.57:2444/192.168.31.103/uploadMyModel?user_id='+_this.$data.user_info.id)
        axios.post('http://8.210.14.57:2444/192.168.31.103/uploadModelInfo',qs.stringify(jsonParam)).then(function (response) {
          console.log(response);
        })
        console.log(result)
      }
      train();
    },
    //模型创建
    createModel(){
      //简单模型创建
      if(this.$data.selectModelResult== 1){
        if(this.$data.LayersResult == 3){
          //创建3层全连接网络
          this.$data.SimpleModel = createSimpleModel(3, this.$data.ActivationResult);
        }else if(this.$data.LayersResult == 4){
          //创建4层全连接网络
          this.$data.SimpleModel = createSimpleModel(4, this.$data.ActivationResult);
        }else{
          //创建5层全连接网络
          this.$data.SimpleModel = createSimpleModel(5, this.$data.ActivationResult);
        }
        console.log(this.$data.SimpleModel.summary())
        this.simpleModelTrain()
      }else{//复杂模型创建
        if(this.$data.LayersResult == 3){
          //创建3层卷积层
          this.$data.ComplexModel = createComplexModel(3, this.$data.ActivationResult);

        }else if(this.$data.LayersResult == 4){
          //创建4层卷积层
          this.$data.ComplexModel = createComplexModel(4, this.$data.ActivationResult);

        }else{
          //创建5层卷积层
          this.$data.ComplexModel = createComplexModel(5, this.$data.ActivationResult);
        }
        console.log((this.$data.ComplexModel.summary()))
        this.complexModelTrain()
      }
    },
  },
  mounted() {
    var _this=this;
    axios.get("http://8.210.14.57:2444/LoginCenter/getUserInfo").then(function(res){
      console.log(res)
      _this.$data.user_info.id=res.data.user_id;
      _this.$data.user_info.nickname=res.data.nickname;
    });
  }
}
</script>

<style>
#mycontainer{
  overflow-y: scroll!important;
  margin-top: 15px;
  padding-bottom: 70px;
}
</style>
